<template>
  <div v-if="!item.meta || !item.meta.hidden">
    <!-- 如果只有一个子路由且不是多级菜单，直接显示子路由 -->
    <template v-if="hasOneShowingChild(item.children, item) && !onlyOneChild.children">
      <el-menu-item :index="resolvePath(onlyOneChild.path)">
        <el-icon>
          <component :is="onlyOneChild.meta.icon" />
        </el-icon>
        <template #title>
          <span>{{ onlyOneChild.meta.title }}</span>
        </template>
      </el-menu-item>
    </template>

    <!-- 如果是多级菜单或有多个子路由，使用 sub-menu -->
    <el-sub-menu v-else :index="resolvePath(item.path)" popper-append-to-body>
      <template #title>
        <el-icon v-if="item.meta && item.meta.icon">
          <component :is="item.meta.icon" />
        </el-icon>
        <span>{{ item.meta.title }}</span>
      </template>
      <!-- 递归渲染子菜单项 -->
      <sidebar-item v-for="child in item.children" :key="child.path" :item="child" :is-nest="true"
        :base-path="resolvePath(child.path)" />
    </el-sub-menu>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import path from 'path-browserify'

// 组件属性
const props = defineProps({
  // 菜单项
  item: {
    type: Object,
    required: true
  },
  // 是否为嵌套菜单
  isNest: {
    type: Boolean,
    default: false
  },
  // 基础路径
  basePath: {
    type: String,
    default: ''
  },
})

// 唯一子路由
const onlyOneChild = ref(null)

/**
 * @description 判断是否只有一个显示的子路由
 * @param {Array} children - 子路由数组
 * @param {Object} parent - 父路由
 * @returns {boolean} 是否只有一个显示的子路由
 */
const hasOneShowingChild = (children = [], parent) => {

  if (!children) {
    children = []
  }

  // 过滤掉隐藏的子路由
  const showingChildren = children.filter(item => {
    if (item.meta && item.meta.hidden) {
      return false
    } else {
      return true
    }
  })

  // 如果只有一个显示的子路由
  if (showingChildren.length === 1) {
    onlyOneChild.value = showingChildren[0]
    if (props.isNest) {
      console.log(onlyOneChild.value);
    }

    return true
  }

  // 如果没有显示的子路由，显示父路由
  if (showingChildren.length === 0) {
    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
    return true
  }

  return false
}

/**
 * @description 解析路径
 * @param {string} routePath - 路由路径
 * @returns {string} 完整路径
 */
const resolvePath = (routePath) => {
  // if (!routePath) return ''

  // 如果是绝对路径，直接返回
  if (routePath.startsWith('/')) {
    return routePath
  }

  // 如果basePath是根路径或空，需要特殊处理
  if (!props.basePath || props.basePath === '/') {
    return `/${routePath}`
  }

  // 如果是相对路径，需要处理路径拼接
  // 确保没有重复斜杠并且路径格式正确
  const resolvedPath = props.basePath.endsWith('/')
    ? `${props.basePath}${routePath}`
    : `${props.basePath}/${routePath}`

  return resolvedPath.replace(/\/+/g, '/')
}
</script>


<style>

</style>